<template>
  <div id='index'>
    <div id="search">
      <input placeholder="Python数据分析师的高薪秘籍" type="text">
    </div>
    <div class="box1">
        <div class="banner">
          <mt-swipe :auto="4000">
            <mt-swipe-item><img src="https://edu-image.nosdn.127.net/3e823fc8f60747d3a6b5c9c88de5c168.jpg?imageView&crop=0_0_1242_573&quality=100&thumbnail=750y346&type=webp" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="https://edu-image.nosdn.127.net/bb8d8074de3547e591fd515e7d4eb01d.jpg?imageView&crop=0_0_1242_573&quality=100&thumbnail=750y346&type=webp" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="https://edu-image.nosdn.127.net/0f192a1e516042b68ff2ae4fa9143f48.png?imageView&crop=0_0_1242_573&quality=100&thumbnail=750y346&type=webp" alt=""></mt-swipe-item>
          </mt-swipe>
        </div>
        <div class="kind">
          <ul>
            <li v-for="(item,key) in kindlist" :key='key'>
              <img :src="item.img" alt="">
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
        <div v-if="ke" class="jingp">
          <p>精选课程</p>
        </div>
        <div class="jing" v-if="ke">
          <ul>
            <li v-for="(item,key) in ke" :key='key'>
              <img v-lazy="item.imageHorizontalUrl"  alt="">
              <p>{{item.title}}</p>
              <div>
                <p><span  class="price">￥{{item.originPrice}}</span><s class="oldprice">￥{{item.originPrice}}</s></p>
                <p class="xingqu">29.2万人感兴趣</p>
              </div>
            </li>
          </ul>
        </div>
        <div v-if="ke" class="more">
          <p @click="more">点击加载更多...</p>
        </div>
        <div v-if="zhibo" class="jingp">
          <p>直播回顾</p>
        </div>
        <div v-if="zhibo" class="jing">
          <ul>
            <li v-for="(item,key) in zhibo" :key='key'>
              <img :src="item.picUrl" alt="">
              <p id="lll">{{item.title}}</p>
            </li>
          </ul>
        </div>
        <div v-if="xiao" class="more">
          <p @click="more1">点击查看更多直播课程...</p>
        </div>
        <div v-if="xiao" class="jingp">
          <p>国内名校</p>
        </div>
        <div  v-if="xiao" class="jing">
          <ul>
            <li v-for="(item,key) in xiao" :key='key'>
              <img v-lazy="item.picUrl" alt="">
              <p class="tit">{{item.title}}</p>
              <p id="pl"><span>{{item.quantity}}</span> | <span>{{item.viewcount}}人观看</span></p>
            </li>
          </ul>
        </div>
    </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { Lazyload } from 'mint-ui';
export default {
  name: 'Index',
  data(){
    return{
      ke:"",
      zhibo:"",
      xiao:"",
      page:6,
      page1:6,
      kindlist:[
        {name:"微专业",img:"http://edu-image.nosdn.127.net/fbbf1cfc-45f2-4a42-bcbb-df5cad63d3c2.png?imageView&quality=100"},
        {name:"职场提升",img:"https://edu-image.nosdn.127.net/23444883-fc1a-4972-8a22-591e5b790ee0.png?imageView&quality=100&thumbnail=103y103"},
        {name:"编程开发",img:"https://edu-image.nosdn.127.net/b216231d-4b93-4d5c-8e7c-e22389f194b8.png?imageView&quality=100&thumbnail=103y103"},
        {name:"人工智能",img:"https://edu-image.nosdn.127.net/55329cd44f7142c7b2eaaca1a68e2430.png?imageView&quality=100&thumbnail=103y103"},
        {name:"产品与运营",img:"https://edu-image.nosdn.127.net/8f2db166988542c2b720f418e6330500.png?imageView&quality=100&thumbnail=103y103"},
        {name:"设计创意",img:"https://edu-image.nosdn.127.net/dd3fdff7aeea4b37af8d623be3695331.png?imageView&quality=100&thumbnail=103y103"},
        {name:"电子商务",img:"https://edu-image.nosdn.127.net/c0c090e1872748ff8cec40ed03b3e476.png?imageView&quality=100&thumbnail=103y103"},
        {name:"语言学习",img:"https://edu-image.nosdn.127.net/fd322af24d8947a8961b99c42b8261e8.png?imageView&quality=100&thumbnail=103y103"}
      ]
    }
  },
  methods:{
    more(){
      this.page+=6
      this.$http.get('https://vip.open.163.com/open/trade/mob/course/items.do?cursor=0&pagesize='+this.page+'&contentType=2').then((res=>{
      this.ke=res
    }))
    },
    more1(){
      this.page1+=6
      this.$http.get('https://c.open.163.com/open/mob/movie/classify/playlist.do?id=40&type=5&cursor=0&page=++&pagesize='+this.page1).then((res=>{
      this.zhibo=res
    }))
    }
  },
  mounted(){
    this.$http.get('https://vip.open.163.com/open/trade/mob/course/items.do?cursor=0&pagesize='+this.page+'&contentType=2').then((res=>{
      this.ke=res
    }))
    this.$http.get('https://c.open.163.com/open/mob/movie/classify/playlist.do?id=40&type=5&cursor=0&pagesize='+this.page1).then((res)=>{  
      this.zhibo=res
    })
    this.$http.get('https://c.open.163.com/open/mob/movie/classify/playlist.do?id=12&type=5&cursor=0&pagesize=10').then((res)=>{
      this.xiao=res
    })
  }
}
</script>


<style lang="scss" scoped>
#lll{
  margin: 0.2rem  0 0.4rem;
}
image[lazy=loading] {
  width: 1rem;
  margin: auto;
}
#pl{
  font-size: 0.26rem;
  height: 1rem;
  line-height: 0.8rem;
  color: gray;
}
.div1{
  height: 2rem;
}
.title{
  height: 1rem;
}
.more{
  font-size: 0.31rem;
  height: 1rem;
  margin-top: 0.14rem;
  color: gray;
  line-height: 0.6rem;
  text-align: center;
}
#search{
  width: 100%;
  padding: 0.2rem 0;
  background: white;
  text-align: center;
  display: flex;
  input{
    width: 8rem;
    height: 0.7rem;
    text-align: center;
    margin: auto;
     background-color:#f5f5f9;
     border: none;
     border-radius:0.08rem;
     background:#f5f5f9 url('../../assets/suosou.svg') no-repeat 1.72rem ;
     background-size: 0.5rem 0.5rem;
  }
}
.jingp{
  font-size: 0.36rem;
  font-weight: 700;
  height: 0.5rem;
  margin-bottom: 0.3rem;
  border-left: 0.08rem solid red;
  margin-left: 0.2rem;
  p{
     height: 0.4rem;
    margin-left: 0.1rem;
  }

}
.jing{
  padding: 0 0.2rem;
  ul{
    display: flex;
    flex-wrap: wrap;
    font-size: 0.24rem;
    justify-content: space-between;
    li{
       width: 48%;
      p{
        width: 100%;
        font-size: 0.32rem;
        height: 0.8rem;
        margin: 0.1rem 0;
      }
      img{
         width: 100%;
        border-radius: 0.2rem;
        margin: 0 auto;
      }
       div{
         display: flex;
         justify-content: space-between;
         height: 1.3rem;
         line-height:0.4rem;
        
        .price{
          color:orange;
          font-size: 0.3rem;
          font-weight: 700;
        }
        .oldprice{
          color: gray;
          font-size: 0.2rem;
          margin-left: 0.08rem;
          
        }
        .xingqu{
          font-size: 0.2rem;
          color: gray;
        }
       }
    }
  }
}
.kind{
  font-size: 0.28rem;
  padding-top: 0.2rem;
  height: 3.7rem;
  img{
    width: 1.1rem;
    height: 1.1rem;
  }
  ul{
    display: flex;
    flex-wrap: wrap;
    height: 3.5rem;
    li{
      width: 25%;
      height: 1.6rem;
      text-align: center;
      p{
        line-height: 0.6rem;
      }
    }
  }
}
#index{
  height: 100%;
  display: flex;
  flex-direction:column ;
}
.box1{
  flex-grow: 1;
  overflow-y:scroll ;
}

  .banner{
    padding: 0.36rem 0.3rem;
    height: 4rem;
    img{
      width: 100%;
      height: 100%;
      border-radius: 0.2rem;
    }
    .mint-swipe-indicator{
      border-radius: 0;
      width: 0.6rem;
      height: 0.2rem;
    }
  }

</style>
